<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetstore</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />

</head>
<body>
<div th:replace="common/top"></div>

<div id="BackLink">
    <a href="/catalog/view">Return to Main Menu</a>
</div>

<div id="Catalog">

    <div id="Cart" th:object="${cart}">
    <h2>Shopping Cart</h2>
    <form action="/cart/updateCartQuantities" method="post">
        <table id="CPI" align="center">
            <tr>
                <th>  </th>
                <th><b>Item ID</b></th>
                <th><b>Product ID</b></th>
                <th><b>Description</b></th>
                <th><b>In Stock?</b></th>
                <th><b>Quantity</b></th>
                <th><b>List Price</b></th>
                <th><b>Total Cost</b></th>
                <th>&nbsp;</th>
            </tr>

                <tr th:if="${cart.numberOfItems}==0">
                    <td><b>Your cart is empty.</b></td>
                </tr>


                <tr th:each="cartItem:${cart.cartItemList}">
                    <td><input type="checkbox" name="" th:value="${cartItem.item.itemId}" ></td>

                    <td>
                        <a th:href="'/catalog/viewItem?itemId='+${cartItem.item.itemId}" th:text="${cartItem.item.itemId}">cartItem item itemId</a>
                    </td>
                    <td th:text="${cartItem.item.productId}">cartItem item product productId</td>

                    <td th:text="${cartItem.item.attribute1}">
                        cartItem item attribute1
                    </td>

                    <td th:text="${cartItem.inStock}">cartItem inStock</td>

                    <td>
                        <input type="text" class="quantity" onblur="updateCart();" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" >
                    </td>

                    <!--<td>
                        <label th:text="'Sub Total:$'+${#numbers.formatDecimal(cartItem.item.listPrice,1,2)}"></label>

                    </td>

                    <td class="total">
                        <label th:text="'total Total:$'+${#numbers.formatDecimal(cartItem.total,1,2)}"></label>

                    </td>-->
                    <td th:text="'$'+${#numbers.formatDecimal(cartItem.item.listPrice,1,2)}"></td>
                    <td th:text="'$'+${#numbers.formatDecimal(cartItem.total,1,2)}"></td>

                    <td>
                        <a th:href="'/cart/removeItemFromCart?workingItemId='+${cartItem.item.itemId}" class="Button" >Remove</a>
                    </td>
                </tr>

            <tr >
                <td>
                    Sub Total:$
                </td>
                <td colspan="8">
                    <label id="subtotal" th:text="${cart.subTotal}">cart subTotal</label>
                </td>
                	<input type="submit"  value="UpdateCart">
            </tr>
        </table>
        <!--<input type="submit" name="account" value="Proceed to Checkout" />-->
    </form>
    <script type="text/javascript" src="../../static/js/updateCart.js"></script>
    <script type="text/javascript" scr="../../static/js/Cart.js"></script>

        <a class="Button" th:if="${cart.numberOfItems > 0}" href="/order/newOrderForm" >
            Proceed to Checkout
        </a>
</div>

    <div id="MyList" th:if="(${account} != null) and (${authenticated})">
        <div th:if="${account.listOption}">
            <p>Pet Favorites <br />
                Shop for more of your favorite pets here.
            </p>
            <ul>
                <li th:each="product:${myList}">
                    <a th:href="'/catalog/viewProduct?productId='+${productId}" th:text="${product.productId}"></a>
                </li>
            </ul>
        </div>
    </div>


    <div id="Separator">&nbsp;</div>
</div>
<div th:replace="common/bottom"></div>
</body>
</html>